@use '@angular/material/core/tokens/token-utils';
@use '@angular/material/core/style/sass-utils';

// The prefix used to generate the fully qualified name for tokens in this file.
$global-prefix: ngm;
$prefix: (ngm, models);
$prefix-color: (#{$prefix}, color);

@function get-unthemable-tokens() {
  @return (
    primary-container-rounded: var(--#{$global-prefix}-primary-container-rounded)
  );
}

@function get-color-tokens() {
  @return (
    color-surface: var(--#{$global-prefix}-color-surface),
  );
}

@function get-token-slots() {
  @return sass-utils.deep-merge-all(
    get-unthemable-tokens(),
    get-color-tokens(),
  );
}

:host {
  @include token-utils.create-token-values($prefix, get-token-slots());

  border-top-left-radius: var(--ngm-models-primary-container-rounded);// #{token-utils.get-token-variable(primary-container-rounded)});
  background-color: var(--ngm-models-color-surface); // #{token-utils.get-token-variable(color-surface)});

  @apply flex flex-col w-full h-full overflow-auto;

  .pac-page__body {
    padding-top: 0;
  }
}

.file-input {
  display: none;
}

.ant-page-header-heading-extra {
  white-space: normal;
}

.pac__table-actions {
  opacity: 0;
}

:host::ng-deep {
  .cdk-row:hover {
    .pac__table-actions {
      opacity: 1;
    }
  }
  ngm-tree-table {
    .mat-cell, .mat-header-cell {
      white-space: nowrap;
      padding: 0 10px;
    }
  }
}

ngm-tree-table {
  display: block;
  overflow-x: auto;
}
